<template>
    <div class="information">
        <div class="header">
            * 为了您的权益请完善相应的资料
        </div>
        <div style="text-align:center;padding-bottom:.6rem;border-bottom:solid .5px rgba(0,0,0,0.38)">
            <input type="file" style="display:none" name="image" id="file" accept="image/*" @change="upload($event)">
            <div class="headimg">
                <label id="file-upload" for="file"></label>
                <img v-show="img" :src="img" alt="">
                <div v-show="!img" class="headimgbox"></div>
            </div>
            <p class="hui">上传头像</p>
        </div>
        <div class="content">
            <div class="content-items">
                <div>
                    <span>昵称</span><input type="text" placeholder="输入昵称">
                </div>
                <div class="flex" @click="check = true">
                    <span>性别</span>
                    <div v-show="!sex">
                        <span>请选择</span>
                        <span>＞</span>
                    </div>
                    <div v-show="sex">
                        <span>{{sex}}</span>
                    </div>
                </div>
                <div>
                    <span>个性签名</span>
                    <input type="text" placeholder="请输入">
                </div>
            </div>
        </div>
        <mt-popup style="width:100%;text-align:center" v-model="check" position="bottom">
            <p class="buttom-flex">
                <button @click="getValue">确定</button>
                <button @click="check = false">取消</button>
            </p>
            <mt-picker ref="picker" :slots="slots"></mt-picker>
        </mt-popup>
    </div>
</template>
<script>
import qiniu from '@/api/qiniu'
import { Popup, Picker } from 'mint-ui'
export default {
    name: '',
    components: {
        mtPopup: Popup,
        mtPicker: Picker
    },
    data() {
        return {
            nickname: '',
            headimgurl: '',
            sex: '',
            files: '',
            img: '',
            check: false,
            slots: [
                {
                    flex: 1,
                    values: ['男', '女'],
                    textAlign: 'center'
                }
            ]
        }
    },
    methods: {
        upload(e) {
            if (e.target.files.length > 0) {
                var files = e.target.files[0] //提交的图片
                if (files.size > 5 * 1024 * 1024) {
                    this.$toast({
                        message: '图片不得超过5M',
                        duration: 2000
                    })
                    return false
                }
                this.$loading.open()
                var str = qiniu.str(6)
                var formdata = new FormData()
                formdata.append('file', files)
                formdata.append('token', qiniu.token)
                formdata.append(
                    'key',
                    'art' +
                        new Date().getTime() +
                        str +
                        '.' +
                        files.type.split('/')[1]
                )
                this.axios
                    .post(qiniu.domain, formdata)
                    .then(res => {
                        this.$loading.close()
                        if (res.data.key) {
                            this.files = qiniu.qiniuurl + res.data.key
                            this.img = URL.createObjectURL(files)
                        }
                    })
                    .catch(err => {
                        this.$loading.close()
                    })
            }
        },
        getValue(){
            this.sex = this.$refs['picker'].getValues()[0] || ''
            this.check = false
        }
    },
    created() {
        
    }
}
</script>
<style scoped>
.header {
    width: 100%;
    height: 0.96rem;
    padding-left: 0.24rem;
    line-height: 0.96rem;
    font-size: 0.32rem;
    color: #fff;
    background: rgba(239, 187, 91, 1);
}
.headimg {
    width: 1.28rem;
    margin: 0 auto;
    padding: 0.36rem 0 0.24rem;
    position: relative;
}
.headimg img {
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 50%;
}
.headimgbox {
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 50%;
    border: solid 1px #999;
}
#file-upload {
    width: 1.28rem;
    height: 1.28rem;
    position: absolute;
    top: 0.36rem;
    left: 0;
}
.content-items {
    /* padding: 0.2rem 0; */
    font-size: 0.32rem;
}
.content-items > div {
    margin: 0 0.24rem;
    padding: 0.2rem 0;
    border-bottom: solid 1px rgba(200, 200, 200, 0.8);
}
.content-items > div > span {
    display: inline-block;
    width: 1.4rem;
}
.content-items .flex {
    display: flex;
    justify-content: space-between;
}
.buttom-flex{
    display: flex;
    width: 100%;
    justify-content: space-around
}
.buttom-flex button{
    width: 50%;
    height: .8rem;
    font-size: .32rem
}
</style>
